import React from 'react';
import { RecommendItemProps } from './types';
import styled from './index.module.css';
import { replaceKeyowrds } from '@/views/utils';
export default function RecommendItem({ good,addCart }: RecommendItemProps) {
    const addCartProp = () => {
        addCart(good);
    };
    return (
        <div className={styled.recomendItem}>
            <div className={styled.top_img}>
                <div className={styled.logo}>
                    <img src={'https://' + good.mediaIcon?.file} alt="" />
                </div>
                <img src={'https://' + good.media?.file} alt="" />
                <div className={styled.shopShow}>Shop Now</div>
                <div className={styled.addCart}>
                    <i className="iconfont" onClick={addCartProp}>&#xe726;</i>
                </div>
            </div>
            <div className={styled.bottom_text}>
                <div className={[styled.title, 'marginTop10', styled.hh].join(' ')}>
                    {good.name}
                </div>
                <div className={[styled.desc, styled.hh2, 'marginTop10'].join(' ')}>
                    {good.description}
                </div>
                <div
                    className={[styled.keywords, styled.hh2, 'marginTop10'].join(' ')}
                    dangerouslySetInnerHTML={{
                        __html:
                            good.keywords
                                ?.map((item) => {
                                    return replaceKeyowrds(item);
                                })
                                .join(' ') || '',
                    }}
                ></div>
                <div className={[styled.price, 'marginTop10'].join(' ')}>
                    {good.price > 0 ? (
                        <>
                            <span style={{ color: 'red' }}>${good.price}</span>
                            <span
                                style={{
                                    textDecoration: 'line-through',
                                    marginLeft: '10px',
                                    color: '#6b7280',
                                }}
                            >
                                ${good.oldPrice}
                            </span>
                        </>
                    ) : (
                        <span style={{ color: 'red' }}>${good.oldPrice}</span>
                    )}
                </div>
            </div>
        </div>
    );
}
